<template>
  <!--  -->
  <!-- 管理员功能：设置-用户页面 -->
  <!--  -->
    <div>
        <div class="top-panel">
            <!-- 搜索框表单 -->
            <el-form :model="searchFormData" ref="searchFormDataRef" label-width="110px" @submit.prevent>
                <el-row>
                    <el-col :span="4">
                        <!-- 用户名搜索 -->
                        <el-form-item label="用户昵称" style="width:222px">
                            <el-input 
                            clearable 
                            placeholder="请输入用户名" 
                            v-model.trim="searchFormData.nickName"
                            @keyup.native="loadDataList"
                            maxlength="5"
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <!-- 状态搜索 -->
                        <el-form-item label="状态" style="width:222px">
                            <el-select v-model="searchFormData.status" placeholder="请选择状态" clearable>
                                <el-option label="启用" :value="1"></el-option>
                                <el-option label="禁用" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :style="{ 'padding-left': '90px' }">
                        <el-button type="primary" @click="loadDataList">查询</el-button>
                    </el-col>
                </el-row>
            </el-form >   
        </div>

        <!-- 数据列表 -->
        <div class="file-list">

            <Table
              ref="dataTableRef"
              :columns="columns"
              :dataSource="tableData"
              :fetch="loadDataList"
              :initFetch="true"
              :options="tableOptions"
              @rowSelected="rowSelected"> 
              <!-- 头像 -->
              <template #avatar="{ index, row }">
                <div class="avatar">
                    <Avatar :userId="row.userId" :avatar="row.qqAvatar"></Avatar>
                </div>
              </template>
              <!-- 空间 -->
              <template #space="{ index, row }">
                {{ proxy.Utils.size2Str(row.useSpace) }} / {{ proxy.Utils.size2Str(row.totalSpace) }}
              </template>
              <!-- 状态 -->
              <template #status="{ index, row }">
                <span v-if="row.status == 1" style="color: #529b2e">启用</span>
                <span v-if="row.status == 0" style="color: #f56c62">禁用</span>
              </template>
              <!-- 操作 -->
              <template #op="{ index, row }">
                <span class="a-link" @click="updateSpace(row)">分配空间</span>
                <el-divider direction="vertical"></el-divider>
                <span class="a-link" @click="updateUserStatus(row)">
                    {{ row.status == 0 ? "启用" : "禁用 "}}
                </span>
              </template>
            </Table>

        </div>

        <!-- 分配空间弹窗 -->
        <Dialog
            :show="dialogConfig.show"
            :title="dialogConfig.title"
            :buttons="dialogConfig.buttons"
            :showCancel="false"
            width="400px"
            @close="dialogConfig.show = false">
            <!-- 表单 -->
            <el-form ref="formDataRef" :model="formData" :rules="rules" label-width="80px" @submit.prevent>
                <el-form-item label="昵称">
                    {{ formData.nickName }}
                </el-form-item>
                <el-form-item label="空间大小" prop="changeSpace">
                    <el-input v-model="formData.changeSpace" placeholder="请输入空间大小" clearable>
                        <template #suffix>MB</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </Dialog>
    </div>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, nextTick, onMounted, computed } from "vue";
const { proxy } = getCurrentInstance();

//请求定义
const api = {
    loadDataList: "/admin/loadUserList",          //获取用户列表
    updateUserStatus: "/admin/updateUserStatus",  //修改用户状态（启用/封禁）
    updateUserSpace: "/admin/changeUserSpace",    //修改用户可使用的总空间             
}; 

//列表属性展示
const columns = [
    {
        label: "头像",
        prop: "avatar",
        width: 80,
        scopedSlots: "avatar",
    },
    {
        label: "昵称",
        prop: "nickName",
    },
    {
        label: "邮箱",
        prop: "email",
    },
    {
        label: "空间使用",
        prop: "space",
        scopedSlots: "space",
    },
    {
        label: "注册时间",
        prop: "joinTime",
    },
    {
        label: "最后登录时间",
        prop: "lastLoginTime",
    },
    {
        label: "状态",
        prop: "status",
        scopedSlots: "status",
        width: 80,
    },
    {
        label: "操作",
        prop: "op",
        scopedSlots: "op",
        width: 150,
    },
];

const searchFormData = ref({});   //两个搜索框的表单
const tableData = ref({});        //分页查询数据集
const tableOptions = ref({
    extHeight: 50,
    selectType: "checkbox",
});

const showLoading = ref(true);             //是否开启 等待响应时的样式


// /**
//  * 搜索
//  */
// const search = () => {
//     showLoading.value = true;
//     loadDataList();
// };


/**
 * 请求列表
 */
const loadDataList = async () => {
    let params = {
        pageNo: 1,
        pageSize: 10,
    };
    Object.assign(params, searchFormData.value);  //将表单对象的值复制到params中
    //发送请求
    let result = await proxy.Request({
        url: api.loadDataList, //获取数据列表
        showLoading: showLoading.value,
        params: params,
        dataType: 'json',      //以json形式发送参数（默认是以文件形式）如不设置dataType，则后端无需使用@RequestBody接收对象
    });

    if (!result) {
        return;
    };
    tableData.value = result.data.userList;
};


/**
 * 启用/禁用操作按钮，修改用户状态
 */
const updateUserStatus = (row) => {
    proxy.Confirm(`是否确定对【${row.nickName}】进行${row.status == 0 ? "启用" : "禁用"}`, async () => {
        let result = await proxy.Request({
            url: api.updateUserStatus,
            params: { 
                userId: row.userId, 
                status: row.status == 0 ? 1 : 0 
            },
        });
        if (!result) {
            return;
        };
        loadDataList();   //重新请求列表
    })
};


//弹窗属性
const dialogConfig = ref({
    show: false,   //false为关闭弹窗
    title: "分配空间大小",
    buttons: [
        {
          type: "primary",
          text: "确定",
          click: (e) => {
            submitForm();    //确定按钮
          },
        },
    ],
});

const formData = ref({});     //分配空间大小的表单
const formDataRef = ref();
const rules = {    //根据form表单中的prop属性进行选择校验（proxy.Verify已在main.js中声明）
    changeSpace: [{ required: true, message:"请输入空间大小" }],
};


/**
 * 分配空间按钮
 */
const updateSpace = (row) => {
    dialogConfig.value.show = true;
    nextTick(() => {    //初始化表单对象
        formDataRef.value.resetFields();
        formData.value = Object.assign({}, row);   //复制整个对象到{}, 并返回
    });
};


/**
 * 分配空间弹窗确定按钮
 */
const submitForm = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return;    //校验不通过，直接返回
        }
        let params = {};
        Object.assign(params, formData.value);     //将表单对象的值复制到params中
        let result = await proxy.Request({
            url: api.updateUserSpace,
            params: params
        });
        if (!result) {
            return;
        }
        dialogConfig.value.show = false;
        loadDataList();
        proxy.Message.success("空间分配成功");
    })
}



</script>
<style lang="scss" scoped>

</style>